/* components */
import { BaseSelectUserInfiniteScrollUser, BaseSelectUserUserItems, BaseSelectUserNoDataView } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, BaseSelectUserFetchDebounceTime, SelectUserComponentDepartment } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import {
  useBaseSelectUserDepartmentUserListParams, 
  useBaseSelectUserFilter, 
  useBaseSelectUserOptions, 
  useFetchDepartmentList,
  useFetchDepartmentUserList,
  useSelectUserDepartmentUserList 
} from '@src/component/common/BaseSelectUser/hooks'
/* scss */
import '@src/component/common/BaseSelectUser/components/Department/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
import { debounce } from 'lodash'
import { useBaseSelectUserStoreLoadingMap, useBaseSelectUserStoreUserListMap, useBaseSelectUserStoreUserCountMap, useBaseSelectUserStoreFilterNeedUpdateMap, useBaseSelectUserStoreDepartmentData } from '../..'
import { isFalse } from '@src/util/type'

export type DepartmentRightProps = {
  isMulti: boolean;
  value: SelectUserComponentDepartment[];
  showChildren: boolean;
  showChildrenIcon: boolean;
}

export interface DepartmentRightSetupState {
  
}

export enum DepartmentRightEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
}

export type DepartmentRightInstance = ComponentInstance & DepartmentRightSetupState
export type DepartmentRightVM = ComponentRenderProxy<DepartmentRightProps> & CommonComponentInstance & DepartmentRightInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentRight,
  emits: [
    DepartmentRightEmitEventNameEnum.Input,
    DepartmentRightEmitEventNameEnum.Click,
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 是否显示子部门 */
    showChildren: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentDepartment[]>,
      default: () => []
    }
  },
  setup(props: DepartmentRightProps, { emit }) {
    
    const { 
      isLoadmoreDisabled: isLoadmoreDepartmentUserListDisabled,
      isLoadmoreNotDisabled: isLoadmoreDepartmentUserListNotDisabled,
    } = useSelectUserDepartmentUserList()
    
    const { departmentUserList, isDepartmentUserListEmpty } = useBaseSelectUserStoreUserListMap()
    
    const { departmentLoading, tabLoading, departmentUserLoading, setDepartmentUserLoading, clearDepartmentUserLoading } = useBaseSelectUserStoreLoadingMap()
    
    const { addPageNum: addDepartmentUserListPageNum } = useBaseSelectUserDepartmentUserListParams()
    
    const { isHideUser } = useBaseSelectUserOptions()
    
    // 获取部门人员列表
    const fetchDepartmentUserList = useFetchDepartmentUserList()
    
    /** 
     * @description 是否显示部门人员列表无数据页面
     * 1. 且 部门人员列表为空
     * 2. 且 不在加载状态
    */
    const isShowDepartmentUserListNotDataView = computed(() => {
      return isDepartmentUserListEmpty.value && isFalse(departmentUserLoading.value) && isFalse(departmentLoading.value)
    })
    
    /** 
     * @description 是否不显示部门人员列表无数据页面
    */
    const isNotShowDepartmentUserListNotDataView = computed(() => {
      return isFalse(isShowDepartmentUserListNotDataView.value)
    })
    
    const loadmoreDepartmentUserListHandler = () => {
      addDepartmentUserListPageNum()
      fetchDepartmentUserList().finally(clearDepartmentUserLoading)
    }
    
    const loadmoreDepartmentUserListDebounceHandler = debounce(loadmoreDepartmentUserListHandler, BaseSelectUserFetchDebounceTime)
    
    const loadmoreDepartmentUserListDebounceImplHandler = () => {
      
      if (isHideUser.value) {
        return
      }
      
      if (isLoadmoreDepartmentUserListNotDisabled.value) {
        setDepartmentUserLoading()
      }
      
      loadmoreDepartmentUserListDebounceHandler()
      
    }
    
    return {
      isShowDepartmentUserListNotDataView,
      isNotShowDepartmentUserListNotDataView,
      
      departmentUserList,
      
      departmentLoading,
      departmentUserLoading,
      tabLoading,
      
      loadmoreDepartmentUserListDebounceImplHandler,
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: (this.departmentLoading || this.departmentUserLoading) && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentRight} {...attrs}>
        
        {/* start 无限滚动人员列表 */}
        <BaseSelectUserInfiniteScrollUser
          disabled={this.isLoadmoreDepartmentUserListDisabled}
          loadmore={this.loadmoreDepartmentUserListDebounceImplHandler}
          v-show={this.isNotShowDepartmentUserListNotDataView}
        >
          
          {/* start 人员列表 */}
          <BaseSelectUserUserItems 
            value={this.departmentUserList} 
            is-multi={this.isMulti} 
          />
          {/* end 人员列表 */}
          
        </BaseSelectUserInfiniteScrollUser>
        {/* end 无限滚动人员列表 */}
        
        {/* start 无数据显示 */}
        <BaseSelectUserNoDataView v-show={this.isShowDepartmentUserListNotDataView} />
        {/* end 无数据显示 */}
        
      </div>
    )
  }
})
